@use "sass:map";

// The CSS variables are used in the dynamic-css.js file in order to reuse the same SCSS
// variable presets.
:root {
  --w-base-increment: #{$base-increment};
  --w-css-scope: #{$css-scope};

  background-color: rgb(var(--w-base-bg-color-rgb));
  color: rgb(var(--w-base-color-rgb));
}

:root[data-theme="light"] {
  --w-base-bg-color-rgb: #{map.get($theme-light, 'base-bg-color-rgb')};
  --w-base-color-rgb: #{map.get($theme-light, 'base-color-rgb')};
  --w-contrast-bg-color-rgb: #{map.get($theme-light, 'contrast-bg-color-rgb')};
  --w-contrast-color-rgb: #{map.get($theme-light, 'contrast-color-rgb')};
  --w-caption-color-rgb: #{map.get($theme-light, 'caption-color-rgb')};
  --w-disabled-color-rgb: #{map.get($theme-light, 'disabled-color-rgb')};
}

:root[data-theme="dark"] {
  --w-base-bg-color-rgb: #{map.get($theme-dark, 'base-bg-color-rgb')};
  --w-base-color-rgb: #{map.get($theme-dark, 'base-color-rgb')};
  --w-contrast-bg-color-rgb: #{map.get($theme-dark, 'contrast-bg-color-rgb')};
  --w-contrast-color-rgb: #{map.get($theme-dark, 'contrast-color-rgb')};
  --w-caption-color-rgb: #{map.get($theme-dark, 'caption-color-rgb')};
  --w-disabled-color-rgb: #{map.get($theme-dark, 'disabled-color-rgb')};
}

* {
  outline: none;
  margin: 0;
  padding: 0;
}

body {overflow-x: hidden;}

a {text-decoration: none;}

.w-app {
  position: relative; // Make the .w-app a referential for tooltips / menus.
  display: flex;
  flex-direction: column;
  min-height: 100dvh;

  &, *, :before, :after {box-sizing: border-box;}

  &.row {flex-direction: row;}
  &.d-block {display: block;}
  &.align-center {align-items: center;}
  &.align-end {align-items: flex-end;}
  &.justify-center {justify-content: center;}
  &.justify-end {justify-content: flex-end;}
  &.justify-space-between {justify-content: space-between;}
  &.justify-space-around {justify-content: space-around;}
  &.justify-space-evenly {justify-content: space-evenly;}
  &.text-center {text-align: center;}
  &.text-right {text-align: right;}
}

.w-main {
  padding-left: 3 * $base-increment;
  padding-right: 3 * $base-increment;
}
